﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <link href="~/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="~/css/bootstrap-table.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="~/css/base.css" />
    <link rel="stylesheet" href="~/css/info-mgt.css" />
    <link rel="stylesheet" href="~/layui/css/layui.css" />
    <script src="~/Scripts/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="~/layui/layui.js"></script>
    @*<script type="text/javascript" src="~/js/jquery.js"></script>*@
    <script src="~/js/bootstrap.min.js"></script>
    <script src="~/js/bootstrap-table.js"></script>
    <script src="~/js/bootstrap-table-zh-CN.min.js"></script>
    <script src="~/js/date/js/laydate.js"></script>
    <script src="~/js/layer_v2.1/layer/layer.js"></script>
    <script src="~/layui/time.js"></script>
    <script src="~/js/train.js"></script>
    <style>
        .layui-layer-title {
            background: url(images/righttitlebig.png) repeat-x;
            font-weight: bold;
            color: #46647e;
            border: 1px solid #c1d3de;
            height: 33px;
            line-height: 33px;
        }

        .tabe_bot label {
            width: 70px;
            text-align: right;
            font-size: 14px;
            font-weight: 900;
            color: #46647e
        }

        .l_left {
            float: left
        }

        .tabe_bot input, .tabe_bot select {
            width: 180px;
            height: 30px;
            border-radius: 6px;
            margin: 0 20px 0 0;
            border: none;
            border: 1px #ccc solid
        }

        .tabe_btn {
            width: 60px;
            height: 30px;
            background-color: #68b86c;
            border: none;
            border-radius: 6px;
            color: #fff
        }

        .drop {
            display: inline-block;
            height: 22px;
            line-height: 22px;
            padding: 0 5px;
            background-color: #68b86c;
            color: #fff;
            white-space: nowrap;
            text-align: center;
            font-size: 12px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        .update {
            display: inline-block;
            height: 22px;
            line-height: 22px;
            padding: 0 5px;
            background-color: #68b86c;
            color: #fff;
            white-space: nowrap;
            text-align: center;
            font-size: 12px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        .table-operate a {
            width: 74px;
        }
    </style>
    <title>培训信息</title>
</head>
<body>
    <div class="title"><h2>培训信息</h2></div>
    <div class="query">
        <div class="tabe_bot">
            <div class="l_left"><label>培训名称：</label><input type="text" placeholder="请输入培训名称" id="name"></div>
            <div class="l_left"><label>主讲人：</label><input type="text" placeholder="请输入主讲人" id="person"></div>
            <div class="l_left"><label>培训时间：</label><input type="date" id="time1" placeholder="输入年月" /></div>
            <button class="tabe_btn " id="search">查询</button>
            <div class="clear"></div>
        </div>
    </div>
    <div class="table-operate ue-clear">
        <a href="~/Home/Train_tail?id=0" class="add">添加信息</a>
        <a href="javascript:void()" class="del" id="batchDelete" data-type="getCheckData"><i class="fa fa-trash"></i>批量删除</a>
        @*<a href="javascript:void()" class="del" id="batchdelete" data-type="getcheckdata">删除</a>*@
        <!--<a href="javascript:;" class="edit">编辑</a>-->
        <!--<a href="javascript:;" class="count">统计</a>-->
        <!--<a href="javascript:;" class="check">审核</a>-->
    </div>

    <div class="table-box">
        <table class="layui-hide" id="test" lay-filter="demo"></table>
        <script id="barDemo" type="textml">
            <a class="update" lay-event="edit">编辑</a>
            <a class="drop" lay-event="del">删除</a>
        </script>
    </div>
    <div class="pagination ue-clear"></div>
</body>
</html>
<script>
    !function () {
        laydate.skin('molv');//切换皮肤，请查看skins下面皮肤库
        laydate({ elem: '#demo' });//绑定元素
    }();
</script>
<script>
    layui.use('table', function () {
    //用table就要定义
    var table = layui.table;
    //用form就要定义
    var form = layui.form;
    //表格数据加载
    table.render({
        elem: '#test'
        , url: '/Login/GetMoudelList'
        , cellMinWidth: 80
        , cols: [[
            { type: 'checkbox' }
            , { field: 'Id', width: 50, align: 'center', title: 'ID', sort: true }
            , { field: 'TrainTitle', width: 190, align: 'center', title: '培训标题' }
            , { field: 'Speaker', width: 80, align: 'center', title: '主讲人' }
            , { field: 'StartTime', width: 160, align: 'center', title: '开始时间', templet: "<div>{{Format(d.StartTime,'yyyy-MM-dd hh:mm')}}</div>" }
            , { field: 'EndTime', width: 160, align: 'center', title: '结束时间', templet: "<div>{{Format(d.EndTime,'yyyy-MM-dd hh:mm')}}</div>" }
            , { field: 'UserId', width: 80, align: 'center', title: '用户ID' }
            , { field: 'Address', width: 180, align: 'center', title: '地址' }
            , { fixed: 'right', title: '操作', width: 100, align: 'center', toolbar: '#barDemo' }
        ]]
        , page: true
        , id: 'test'
    });
    //监听工具
    table.on('tool(demo)', function (obj) {
        var AdminUser = obj.data;
        if (obj.event === 'del') {
            //删除
            layer.confirm('确定删除吗？', function (index) {
                $.ajax({
                    url: "/Login/DELETE",
                    type: "Post",
                    data: AdminUser,
                    success: function (operateResult) {
                        if (operateResult.Success) {
                            layer.msg('删除成功！', {
                                title: '提示框',
                                icon: 1,
                                time: 2000
                            }, function () {
                                location.reload();//刷新页面
                                layer.close(index);
                            });
                        }
                        else {
                            layer.msg('删除失败！', {
                                title: '提示框',
                                icon: 1,
                                time: 2000
                            });
                        }
                    }
                });
            });
        }
        else if (obj.event === 'edit') {

            window.location.href = "/Home/Train_tail?id=" + AdminUser.Id;
        };
    })
    //监听表格复选框选择
    table.on('checkbox(demo)', function (obj) {
    });
    //监听复选框，必须先定义美元符号在定义
    var $ = layui.$, active = {
        getCheckData: function () {
            //获取选中数据
            var checkStatus = table.checkStatus('test')
                , data = checkStatus.data;
            //获取拼接的id
            var id = BatchDelete(data);
            //删除数据
            layer.confirm('真的要删除吗', function (index) {
                $.ajax({
                    url: "/Login/BatchDelete?id=" + id,
                    type: "Post",
                    success: function (operateResult) {
                        if (operateResult.Success) {
                            layer.msg('删除成功！', {
                                title: '提示框',
                                icon: 1,
                                time: 2000
                            }, function () {
                                location.reload();//刷新页面
                                layer.close(index);
                            });
                        }
                        else {
                            layer.msg('删除失败！', {
                                title: '提示框',
                                icon: 1,
                                time: 2000
                            });
                        }
                    }
                });

            });
        }
    };
    //点击批量删除按钮事件
    $('#batchDelete').on('click', function () {
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
    });
    //多个条件查询
    $('#search').on('click', function () {
        //获取页面管理员名称和时间
        var title = $("#name").val();
        var speaker = $("#person").val();
        var dates = $("#time1").val();
        //上述方法等价于
        table.reload('test', {
            where: { //设定异步数据接口的额外参数，任意设
                title: title,
                dates: dates,
                speaker: speaker,

            }
        });
    })
});
//拼接id
function BatchDelete(data) {
    var id = "";
    for (var i = 0; i < data.length; i++) {
        if (i != data.length - 1) {
            id += data[i].Id + ',';
        }
        else {
            id += data[i].Id;
        }
    }
    return id;
}
</script>

